<!--订单详情-->
<!--详情界面，四个状态-->
<div class="navbar">
    <div class="navbar-inner">
        <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i></a>
        </div>
        <div class="center sliding">订单详情</div>
        <div class="right"></div>
    </div>
</div>

<!--内容区域-->
<div class="pages navbar-through">
    <div data-page="order-detail" class="page no-toolbar no-navbar">

        {{#js_if "this.type===4"}}
        <div class="toolbar toolbar-bottom toolbar-fixed">
            <div class="row no-gutter">
                <a href="#" class="button active order-confirm col-auto">再次购买</a>
                <a href="#" class="button order-share col-auto">分享获取5元</a>
            </div>
        </div>
        {{/js_if}}

        <div class="page-content order-detail">
            <div class="list-block orders-list">
                <ul>
                    <li>
                        <div class="row">
                            <span class="order-id">订单号：{{id}}</span>
                            <span class="order-status">
                                {{#js_if "this.type===1"}}待支付{{/js_if}}
                                {{#js_if "this.type===2"}}待预约{{/js_if}}
                                {{#js_if "this.type===3"}}待消费{{/js_if}}
                            </span>
                            {{#js_if "this.type===4"}}<span class="order-status completed">已完成</span>{{/js_if}}
                        </div>
                        <div class="row">
                            <span class="order-time">下单时间：{{time}}</span>
                        </div>
                    </li>
                    <li>
                        <div class="row order-content">
                            <img class="col-33" src="{{image}}">
                            <div class="col-66">
                                <div class="goods-desc">
                                    <span>{{desc}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="padding-top: 5px">
                            <span class="order-id">数量</span>
                            <span class="order-status">{{number}}</span>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <span class="order-id">订单总价</span>
                            <span class="order-status">{{price}}</span>
                        </div>
                        <div class="row" style="padding-top: 15px">
                            <span class="order-id">联系人</span>
                            <span class="order-status">{{contact}}</span>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <span class="order-id">手机号</span>
                            <span class="order-status">{{phone}}</span>
                        </div>
                    </li>
                    {{#js_if "this.type===3"}}
                    <li>
                        <div class="row">
                            <span class="text-red order-id">预约时间</span>
                            <span class="text-red order-status">{{orderTime}}</span>
                        </div>
                    </li>
                    <div class="li-divider-15"></div>
                    <li>
                        <div class="row">
                            <span class="order-id">验证二维码</span>
                        </div>
                        <div class="row qr-code">
                            <img src="{{qrCode}}">
                        </div>
                    </li>
                    {{/js_if}}

                    <!--已完成的订单详情-->
                    {{#js_if "this.type===4"}}
                    <li>
                        <div class="row">
                            <span class="text-red order-id">消费时间</span>
                            <span class="text-red order-status">{{consumeTime}}</span>
                        </div>
                    </li>
                    <div class="li-divider-15"></div>
                    <li>
                        <div class="row">
                            <span class="order-id">验证二维码</span>
                        </div>
                        <div class="row qr-code">
                            <img src="{{qrCode}}">
                        </div>
                    </li>
                    {{/js_if}}
                </ul>

                {{#js_if "this.type===1"}}
                <a href="./order/to-order.html" class="button order-pay">立即支付{{price}}元</a>
                {{/js_if}}
                {{#js_if "this.type===2"}}
                <a href="./order/to-order.html" class="button order-btn">立即预约</a>
                {{/js_if}}

            </div>
        </div>
    </div>

</div>